<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>小米盒子</title>
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
<!-- top start -->
    <div class="top">
        <div class="container top-wrap">
            <ul >
                <li><a href="#">小米网</a></li>
                <li><span>|</span></li>
                <li><a href="#">MIUI</a></li>
                <li><span>|</span></li>
                <li><a href="#">米聊</a></li>
                <li><span>|</span></li>
                <li><a href="#">游戏</a></li>
                <li><span>|</span></li>
                <li><a href="#">多看阅读</a></li>
                <li><span>|</span></li>
                <li><a href="#">云服务</a></li>
                <li><span>|</span></li>
                <li><a href="#">小米网移动版</a></li>
                <li><span>|</span></li>
                <li><a href="#">Select&nbsp; region</a></li>
                <li><span>|</span></li>
                <li><a href="#">米粉节答疑</a></li>
            </ul>
            <ul>
                <li><a href="#">登录</a></li>
                <li><span>|</span></li>
                <li><a href="#">注册</a></li>
            </ul>
        </div>
    </div>
<!-- top end -->
    <div class="container">
<!-- logo start -->
        <div class="logo">
            <div class="logo-left"><a href="#"><img src="images/logo.png" alt=""></a></div>
            <div class="logo-right">
                <p><img src="images/clock.png" alt="">4月14日开放购买</p>
                <input type="text" value="搜索您需要的商品">
                <div>
                    <a href="">小米手环</a>
                    <a href="">耳机音箱</a>
                    <a href="">保护壳</a>
                </div>
                <button class="fangdajing"></button>
                <button><img src="images/shopcar.png">购物车</button>
            </div>            
        </div>
<!-- nav start -->
        <div class="nav">
            <ul>
                <li class="drop"><a href="#">全部商品分类</a> <img src="" alt=""></li>
                <li><a href="#">首页</a></li>
                <li><a href="#">小米手机</a></li>
                <li><a href="#">红米</a></li>
                <li><a href="#">小米平板</a></li>
                <li><a href="#">小米电视</a></li>
                <li><a href="#">盒子</a></li>
                <li><a href="#">路由器</a></li>
                <li><a href="#">合约机</a></li>
                <li><a href="#">服务</a></li>
                <li><a href="#">社区</a></li>            
                <li></li>            
            </ul>
        </div>       
    </div>
     <!-- subnav start -->

    <div class="subnav">
        <div class="container">
            <p><span>小米小盒子&nbsp;|</span> 小米盒子  增强版</p>
            <div>
                <ul>
                    <li><a href="#">综述</a></li>
                    <li><a href="#">设计</a></li>
                    <li><a href="#">片源</a></li>
                    <li><a href="#">配置</a></li>
                    <li><a href="#">产品故事</a></li>
                    <li><a href="#">参数</a></li>
                    <li><a href="#">讨论区</a></li>
                    <li><a href="#">F码通道</a></li>
                </ul>
                <button>立即购买</button>
            </div>
        </div>
    </div>
<!-- subnav end -->
    <div class="hezi ta-c">
        <img src="images/reddot.jpg" alt="">
        <h>小米盒子</h>
        <p>全球最小的高清网路机盒顶</p>
        <p1>199元</p1><br>
        <button>立即购买</button>
    </div>
    <div class="chazuo ta-c">
        <h>顶尖科技，小到难以置信</h>
        <p>全球最小的高清网路机盒顶全球最小的高清网路机盒顶全球最小的高清网路机盒顶全球最小的高清网路机盒顶全球最小的高清网路机盒顶
            <br>全球最小的高清网路机盒顶全球最小的高清网路机盒顶
        </p>
    </div>
    <div class="chatou"></div>
    <div class="movie"></div>
    <div class="tv"></div>
    <div class="gift ta-c">
        <div class="container">
            <h>小米最好的新年礼物</h><br>
            <p1>199元</p1><br>
            <img src="images/hz-28.jpg" alt=""><br>
            <button>立即购买</button>
            <ul>
                <li><img src="images/hzs-10.jpg" alt=""><br><a href="#">设计</a></li>
                <li><img src="images/hzs-11.jpg" alt=""><br><a href="#">片源</a></li>
                <li><img src="images/hzs-12.jpg" alt=""><br><a href="#">功能</a></li>
                <li><img src="images/hz-13.jpg" alt=""><br><a href="#">配置</a></li>
                <li><img src="images/gongyi.png" alt=""><br><a href="#">产品故事</a></li>
            </ul>
        </div>  
    </div>
    <div class="container product">
        <div class=" ta-c center">
            <img src="images/shoubing.jpg" alt=""><br>
            <p class="title">小米蓝牙手柄</p>
            <p>小米蓝牙手柄小米蓝牙手柄小米蓝牙手柄</p>
            <p>小米蓝牙手柄小米蓝牙手柄小米蓝牙手柄</p>    
            <h>99元</h>        
        </div>
        <div class="border-left"></div>
        <div class="center ta-c">
            <img src="images/common-footer-mitv2.jpg" alt=""><br>
            <p class="title">小米蓝牙手柄</p>
            <p>小米蓝牙手柄小米蓝牙手柄小米蓝牙手柄</p>
            <p>小米蓝牙手柄小米蓝牙手柄小米蓝牙手柄</p>    
            <h>99元</h>        
        </div>
        <div class="border-left"></div>        
        <div class="center ta-c">
            <img src="images/common-footer-mibox.jpg" alt=""><br>
            <p class="title">小米蓝牙手柄</p>
            <p>小米蓝牙手柄小米蓝牙手柄小米蓝牙手柄</p>
            <p>小米蓝牙手柄小米蓝牙手柄小米蓝牙手柄</p>    
            <h>99元</h>        
        </div>
    </div>
    <div class="subnav">
        <div class="container">
            <p><span>小米小盒子&nbsp;|</span> 小米盒子  增强版</p>
            <div>
                <ul>
                    <li><a href="#">综述</a></li>
                    <li><a href="#">设计</a></li>
                    <li><a href="#">片源</a></li>
                    <li><a href="#">配置</a></li>
                    <li><a href="#">产品故事</a></li>
                    <li><a href="#">参数</a></li>
                    <li><a href="#">讨论区</a></li>
                    <li><a href="#">F码通道</a></li>
                </ul>
                <button>立即购买</button>
            </div>
        </div>
    </div>
    <!-- foot start -->
    <div class="foot">
        <div class="container foot-top">
            <ul >
                <li><img src="images/10.png" alt=""><br>  <a href="#">一小时快修</a></li>
                <li><img src="images/11.png" alt=""><br>  <a href="#">一小时快修</a></li>
                <li><img src="images/12.png" alt=""><br>  <a href="#">一小时快修</a></li>
                <li><img src="images/13.png" alt=""><br>  <a href="#">一小时快修</a></li>
                <li><img src="images/14.png" alt=""><br>  <a href="#">一小时快修</a></li>
            </ul>
        </div>
        <div class="container foot-center">
            <ul>
                <ol>帮助中心</ol>
                <li><a href="#">购物指南</a></li>
                <li><a href="#">支付方式</a></li>
                <li><a href="#">配送方式</a></li>
            </ul> 
            <ul>
                <ol>服务支持</ol>
                <li><a href="#">售后政策</a></li>
                <li><a href="#">自助服务</a></li>
                <li><a href="#">相关下载</a></li>
            </ul>
            <ul>
                <ol>小米之家</ol>
                <li><a href="#">小米之家</a></li>
                <li><a href="#">服务网点</a></li>
                <li><a href="#">预约亲临到点服务</a></li>
            </ul>
            <ul>
                <ol>关于小米</ol>
                <li><a href="#">了解小米</a></li>
                <li><a href="#">加入小米</a></li>
                <li><a href="#">联系我们</a></li>
            </ul> 
            <ul>
                <ol>关注我们</ol>
                <li><a href="#">新浪微博</a></li>
                <li><a href="#">小米部落</a></li>
                <li><a href="#">官方微信</a></li>
            </ul>
            <div class="ta-c">
                <p class="title">400-100-5678</p>
                <p>周一至周日8.00-18.00 <br>
                    (仅收市话费)
                </p>
                <button>
                    24小时在线客服
                </button>
            </div>
        </div>
        <div class="footer ta-c">
            <p>
                小米旗下网站：<a href="#">小米网</a>|<a href="#">MIUI</a>|<a href="#">米家</a>|<a href="#">米聊</a>|<a href="#">多看</a>|<a href="#">游戏</a>|<a href="#">路由器</a>|<a href="#">米粉卡</a>|<a href="#">政企服务</a>|<a href="#"></a>小米天猫店<br>
                ©mi.com 京ICP证110507号 京ICP备10046444号 京公网安备11010802020134号 京网文[2017]1530-131号              
            </p> 
            <div>
                <img src="images/16.png" alt="" >
                <select name="" id="">
                    <option value="">简体中文</option>
                </select>
            </div>
        </div>
    </div>
</body>
</html>